<template>
 <div id="app">
<!-- 修饰符篇 用来增强事件的能力-->

 <!--1、 阻止默认行   @click.prevent   -->
<a  href="https://www.iconfont.cn/" @click.prevent="fn1">去icon</a>
<a href="#" @click.prevent=""></a>

<!--2、 阻止冒泡行为 点击子级 父级不会受到影响   @click.stop-->
<div class="parent" @click="fn2">父级元素
<div class="child" @click.stop="chi">子级孩子</div>
</div>

<!-- 按键修饰符 -->
<!-- 1、监听回车键按下 @keydown.enter    -->
<!-- 2、监听回车键弹起 @keyup.esc    -->
<input type="text" @keydown.enter="fn3">
<input type="password"  @keyup.esc="fn4">


<!-- 按下翻转 -->
<!-- 1、声明一个变量 -->
<h1>{{msg}}</h1>
<!-- 2、点击按钮的时候翻转这个 变量 -->
<!-- 采用实现步骤  
指向this.msg =this.msg.然后用split分割（""）空字符串等于[ "H", "e", "l", "l", "o", ",", "W", "o", "r", "l", "d", "!" ]
接着再用翻转 .reverse() 可以把数组的没每个元素反过来等于[ "!", "d", "l", "r", "o", "W", ",", "o", "l", "l", "e", "H" ]
再用jion（""）空字符串 拼接起来 Hello,World!
-->
<button @click="down">按下翻转</button>



<!--控制 显示与隐藏 -->
<!-- v-show 作用：控制显示和隐藏  v-show="布尔值"-->
<div v-show="age>=19">成年</div>
<div v-show="age<16">未成年人</div>

 <!-- v-if作用：控制显示或者隐藏  v-if="布尔值"-->
    <!-- v-else可以和v-if搭配使用 -->
    <!-- v-if和v-else必须是相邻的兄弟标签 -->
<div v-if="age>=19">拥有路虎</div>
<div v-else>童真</div>

 <!-- 多个条件控制 -->
    <!-- v-else-if -->
    <!-- 最后一个v-else是可选的 -->
    <div v-if="age>=20">初出3社会</div>
    <div v-else-if="age>40">中年财阀</div>
    <div v-else-if="age>70">老年迪斯科</div>
    <!-- <div v-eles>上善若水</div> -->
 </div>
</template>

<script>
export default {
 name: "App",
 // 插值表达式使用的变量放在data函数的返回对象里
 data() {
  return{
msg:"Hello,World!",
age:40  ,
  }
 },methods:{
fn1(){
    console.log("阻止了跳转");
},
fn2(){
    console.log("父级");
},chi(){
    console.log("孩子");
},
fn3(){
    console.log("按下回车");
},
fn4(){
    console.log("按下取消");
},
down(){
    this.msg= this.msg.split("").reverse().join("")
}

 }

};
</script>

<style>
div {
color: plum; text-align: center;
}
a{
text-decoration: none;
}
</style>
